<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #1a: User clicks a link on a page we control and page is usable when onload fires</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">All Docs</a> | <a href="index.html">Index</a></span>
<h1>Boomerang Howto #1a:<br>User clicks a link on a page we control and page is usable when onload fires</h1>
<p>
See <a href="../use-cases.html#uc-1">use case #1</a> for a description of this requirement.
</p>
<p>
We use two pages for this use case.  They may be any two pages on your site, and the code you put into them
is identical, so you could just put it on all pages on your site.  Assuming you're starting out with nothing,
this is what you do:
</p>
<ol>
<li>Copy boomerang.js and the images/ directory into your document root</li>
<li>Add the code below to all your pages:</li>
</ol>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
		user_ip: "&lt;user's ip address&gt;",
		beacon_url: "http://yoursite.com/path/to/beacon.php"
	});
&lt;/script&gt;
</pre>
<p>
This should be sufficient to measure page load time on all but the very first page that a user visits on
your site.  You'll need to get the user's IP address using some server-side programming
language like PHP, Python or C#.  This is necessary in order to save bandwidth calculations
across requests, and makes it a little easier on your users.
</p>

<p>
Go to <a href="howto-1a-page%232.html">Page #2</a> now to see the results of the page load test.
</p>

<h2>More complex sites</h2>
<p>
If you've been doing this website thing for a while, chances are that you use a CDN
to host your javascript, and have several subdirectories with pages.  If you do that,
then change the link to <code>boomerang.js</code> above to point to the absolute location
of that file.  You will also need to tell boomerang where to find its bandwidth testing
images.  Your <code>init()</code> call will then change to this:
</p>
<pre>
BOOMR.init({
		user_ip: "&lt;user's ip address&gt;",
		beacon_url: "http://yoursite.com/path/to/beacon.php",
		BW: {
			base_url: "http://yoursite.com/path/to/bandwidth/images/"
		}
	});
</pre>
<p>
Note, that you point to the image directory.  It is recommended that you put these
images on a server that you want to measure the user's bandwidth and latency to.
In most cases this will be your own server, however, there may be cases where you'd
want to put them on a CDN and measure bandwidth and latency to those servers instead.
This decision is left up to you.  We recommend putting them on your own server.
</p>

<p>
Go to <a href="howto-1a-page%232.html">Page #2</a> now to see the results of the page load test.
</p>

<p class="perma-link">
The latest code and docs is available on <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a>
</p>

<p id="results">
</p>

<script src="../../boomerang.js" type="text/javascript"></script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: '10.0.0.1',
		BW: {
			base_url: '../../images/',
			cookie: 'HOWTO-BA'
		},
		RT: {
			cookie: 'HOWTO-RT'
		}
	});
</script>
</body>
</html>
<!--
    Copyright (c) 2011, Yahoo! Inc.  All rights reserved.
    Copyrights licensed under the BSD License. See the accompanying LICENSE.txt file for terms.
-->
